<template>
    <div class="tool-box" :style="posXY">
        <div @click="closeAllTabs"><el-icon><Refresh /></el-icon> <span>刷新</span></div>
        <div @click="closeOtherTabs('left')"><el-icon><Back /></el-icon><span>关闭左侧</span></div>
        <div @click="closeOtherTabs('right')"><el-icon><Right /></el-icon><span>关闭右侧</span></div>
        <div @click="closeOtherTabs('other')"><el-icon><Close /></el-icon><span>关闭其他</span></div>
    </div>
</template>
<script setup lang='ts'>
    import {useStore} from 'vuex'
    const store = useStore()
    defineProps({
        posXY: {
            type: Object,
            default: ()=>({})
        }
    })
    const closeAllTabs = ()=>{
        console.log('enter')
        store.commit('closeAllTabs')
    }
    const closeOtherTabs = (type:string)=>{
        console.log('type', type)
        store.commit('closeOtherTabs', type)
    }
</script>
<style lang='scss' scoped>
    .tool-box{
        position: absolute;
        left: 0;
        top: 0;
        padding: 10px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
        z-index: 999;
        &>div{
            display: flex;
            height: 32px;
            // justify-content: center;
            align-items: center;
            &:hover{
                color: #1890FF;
                cursor: pointer;
            }
            &>span{
                margin-left: 15px;
            }
        }
    }
</style>